<template>
  <div class="w-80% md:w-11/12 sm:w-11/12 mb-container-full m-auto lg:py-8 md:py-4  bg-white ">
    <div class="xl:mb-8 lg:mb-6 py-4 lg:px-10 md:px-6 sm:px-2 flex user-msg">
      
      <div class="w-15% avatar-container">
        <div class="mr-10 myavatar">
          <img :src="IMG_URL_SERVER +user?.avatar?.url" :alt="user?.avatar?.name" class="avatar wh-full"/>
        </div>
      </div>

      <div class=" w-65% bg-white details">
        <div class="flex justify-start sm:justify-start items-center">
          <div class="h1">{{user?.nickname}}</div>
          <div class="md:ml-2">
            <img class="h-4 sm:w-full" :src="IMG_URL_SERVER +user?.level?.url" alt="">
          </div>
          
          <div v-if="user?.gender === 'male'" class="ml-1 md:ml-2 wh-5 sm:wh-6 bg-blue-600 i-carbon-gender-male "></div>
          <div v-else class="ml-1 md:ml-2 wh-5 sm:wh-6 bg-pink-500 i-carbon-gender-female "></div>
        </div>
        
        <div class="h3 text-sm">认证id：{{user?._id}}</div>
        <div class="myheadline">
          <div class="i-carbon-identification"></div>
          {{user?.headline}}
        </div>
        <div class="mylocation">
          <div class="i-carbon-location"></div>
          IP属地：{{user?.perLocation}}
        </div>
        <div class="flex  justify-start xl:mt-4 xl:pt-4">
          <div class="mr-4 md:text-md lg:text-lg">
            <span>粉丝</span>
            <RouterLink class="hover:text-teal-500 ml-1" :to="`/accountCenter/fanList/${user?._id}`">
              {{user?.fansList?.length}}
            </RouterLink> 
          
          </div>
          <div class="mr-4 md:text-md lg:text-lg">
            <span>关注</span>
            <RouterLink class="hover:text-teal-500 ml-1" :to="`/accountCenter/followList/${user?._id}`">
              {{user?.following?.length}}
            </RouterLink>
       
          </div>
          <div class="mr-4 md:text-md lg:text-lg"> 
            <span>获赞</span>
            <span class="ml-1">{{user?.praiseCount}}</span>
      
          </div>
        </div>
      </div>

      <div class=" w-15% items-stretch flex flex-col option">
        <template v-if="route.params.id === auth?._id">
          <RouterLink class="block mb-2 "  :to="`/accountCenter/edit/${auth?._id}`">
            <button class="btn w-full">编辑</button>
          </RouterLink>
        </template>
        <template v-else>
          <button @click="following" class="btn mb-2 w-full" >{{followingState}}</button>

          <el-dialog
            v-model="centerDialogVisible"
            title="提示"
            width="30%"
            align-center
          >
            <span>确认要取消关注吗？</span>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取消</el-button>    
                <el-button type="primary" @click="unFollowing">
                  确认
                </el-button>
              </span>
            </template>
          </el-dialog>
          <button class="btn w-full" @click="chat">私信</button>
        </template>
      </div>
    
    </div>

    <div class="flex justify-between">
      <div class="w-17% sm:w-27% bg-light-100 mb-font sticky top-0.5rem self-start h-auto">
        <div class="lg:px-8 py-0 sm:py-2 md:py-4 divide_b lg:text-xl md:text-lg  md:px-6 sm:px-2 sm:text-lg mx-auto">
          <span class="text-sm sm:text-base">个人中心</span>
        </div>
        <ul class="user-list px-8 md:px-6 sm:px-2">
          <li>
            <RouterLink :to="`/accountCenter/postList/${user?._id}`" ><div class="i-carbon-chat-bot"></div><span>{{isMyHomePage}}发帖</span></RouterLink>
          </li>
          <li>
            <RouterLink :to="`/accountCenter/replyList/${user?._id}`"><div class="i-carbon-chat"></div><span>{{isMyHomePage}}评论</span></RouterLink>
          </li>
          <li>
            <RouterLink :to="`/accountCenter/bookList/${user?._id}`"><div class="i-carbon-star-filled"></div><span>{{isMyHomePage}}收藏</span></RouterLink>
          </li>
          <li>
            <RouterLink :to="`/accountCenter/fanList/${user?._id}`"><div class="i-carbon-user-favorite"></div><span>{{isMyHomePage}}粉丝</span></RouterLink>
          </li>
          <li>
            <RouterLink :to="`/accountCenter/followList/${user?._id}`" ><div class="i-carbon-user-follow"></div> <span>{{isMyHomePage}}关注</span></RouterLink>
          </li>
        </ul>
      </div>
      
      <div class="w-80% sm:w-70% ">
        <RouterView class="min-h-150"></RouterView>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { fetchUserInfo,fetchUnFollowing,fetchAddFollowing } from "@/server";
import { storeToRefs } from "pinia";
import { IMG_URL_SERVER } from "@/config"

//router
const route = useRoute()
const router = useRouter()
//弹出取消关注对话框
const centerDialogVisible = ref(false)
//用户store
const userStore = useUserStore()
const { user } =  storeToRefs(userStore)
//现在登录的用户store
const authStore = useAuthStore()
const { user:auth } = storeToRefs(authStore)
//登录模态框开关
const utilsStore = useUtilsStore()
//我的他的
const isMyHomePage = computed(()=>{
  return route.params.id === auth?.value?._id ? "我的" : "他的";
})


//关注状态
const followingState = ref('关注')
//重载
const { reloadFlag } = inject<any>("reload")


//关注别人
const following = ()=>{
  //保护条款
  if (!authStore.isAuthenticated) {
    utilsStore.dialogTableVisible = true
    return false;
  }

  if(followingState.value === '关注'){
    fetchAddFollowing(user.value._id).then(()=>{
      followingState.value = '已关注'
    })
  }else{
    centerDialogVisible.value = true
  }

}
//取消关注
const unFollowing = ()=>{
  //保护条款
  if (!authStore.isAuthenticated) {
    utilsStore.dialogTableVisible = true
    return false;
  }
  fetchUnFollowing(user.value._id).then(()=>{
      followingState.value = '关注'
  })
  centerDialogVisible.value = false
}


//聊天socket
const socket = inject<any>('socket')

const chat = ()=>{
  //保护条款
  if (!authStore.isAuthenticated) {
    utilsStore.dialogTableVisible = true
    return false;
  }
  socket.emit("sendContact",{
    user: auth.value._id,
    contact:user.value._id
  })

  router.push(`/message/${user.value._id}`)
}



//更新时发送fetch
watchEffect(()=>{
  if(route.params.id && reloadFlag.value){
    //获取用户信息
    fetchUserInfo(route.params.id as string,()=>true).then((data)=>{
      authStore.init()
      userStore.setUser(data)
      const flag = data?.following.some((val:any)=>{
        return val === auth.value?._id
      })
      if(flag){
        followingState.value = '已关注'
      }else{
        followingState.value = '关注'
      }
    }).catch(err => {
      if (err) {
        router.replace("/404")
      }
    })
  }
},{flush:'post'})


</script>

<style scoped lang="scss">
.mb-container-full{
  @media screen and (min-width:768px) and (max-width:1024px){
    .mb-font{
      font-size: 0.94em;
    }
  }
  @media screen and (min-width:640px) and (max-width:768px){
    .mb-font{
      font-size: 0.94em;
      
    }
    .mb-font-oneline{
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
      }
  }
  @media screen and (max-width:640px){
    width: 95%;
    .mb-font-oneline{
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
      }
    .user-list{
      padding: 0 0.5em;
      li{
        font-size: 0.94em;
      } 
    }
    .mb-list-font{
      font-size: 0.96em;
    }
  }
  @media screen and (max-width:640px){
    width: 95%;
    .user-list{
      padding: 0 0.5em;
      li{
        a{
          justify-content: center;
        }
        span{
          display: none;
        }
        div{
          font-size: 1.2rem;
        }
      } 
    }
    // .mb-list-font{
    //   font-size: 0.96em;
    // }
  }
}


.user-msg{
  @media screen and (min-width:1280px) and (max-width:1536px){
    .avatar-container{
      width: 18%;
    }
    .details{
      width: 65%;
    }
    .option{
      width: 17%;
    }
  }
  @media screen and (min-width:1024px) and (max-width:1280px){
    .avatar-container{
      width: 22%;
    }
    .details{
      width: 61%;
      font-size: 0.9rem;
      .h3{
        font-size: 0.95em;
      }
    }
    .option{
      width: 17%;
    }
  }
  @media screen and (min-width:878px) and (max-width:1024px){
    .avatar-container{
      width: 23%;
    }
    .details{
      width: 63%;
      font-size: 0.9rem;
      .h3{
        font-size: 0.95em;
      }
    }
    .option{
      width: 14%;
    }
  }
  @media screen and (min-width:768px) and (max-width:878px){
    .avatar-container{
      width: 25%;
    }
    .details{
      width: 58%;
      font-size: 0.9rem;
      .h3{
        font-size: 0.95em;
      }
    }
    .option{
      width: 17%;
    }
  }

  @media screen and (min-width:640px) and (max-width:768px){
   
    .avatar-container{
      width: 25%;
    }
    .details{
      width: 58%;
      font-size: 0.9rem;
      .h3{
        font-size: 0.95em;
      }
      .myheadline{
        margin-top: 0;
        height: auto;
      }
      .mylocation{
        height: auto;
      }
    }
    .option{
      width: 17%;
    }
  }
  @media screen and (max-width:640px){
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    font-size: 0.9rem;
   
    .avatar-container{
      width: 26%;
    }
    .btn{
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }
    .details{
      width: 59%;
      font-size: 0.9rem;
      .h1{
        font-size: 1.14rem !important;
        line-height: 1.54rem !important;
      }
      .h3{
        font-size: 0.95em;
      }
      .myheadline{
        margin-top: 0;
        height: auto;
        // font-size: 0.9em;
      }
      .mylocation{
        height: auto;
      }
    }
    .option{
      width: 15%;
    }
  }

}
.myavatar{
  width: 90%;
  @media screen and (min-width:1024px) and (max-width:1280px){
    width: 94%;
    // margin: auto;
  }
}
.myheadline{
  margin-top: 0.5em;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  height: auto;
  @media screen and (min-width:1024px) and (max-width:1280px){
    margin-top: 0;
    height: auto;
    div{
      width: 2.2rem;
      height: 2.4rem;
      margin-right: 0.5em;
      color: #ec6949;
    }
  }
  @media screen and (min-width:768px) and (max-width:1024px){
    margin-top: 0;
    height: auto;
    font-size: 0.88rem;
    div{
      width: 2.2rem;
      height: 2.4rem;
      // margin-right: 2em;
      color: #ec6949;
    }
  }
  @media screen and (max-width:768px){
    margin-top: 0;
    height: auto;
    font-size: 0.84rem;
    line-height: 1rem     ;
    div{
      width: 3.2rem;
      height: 3.4rem;
      color: #ec6949;
      margin-right:0.5em !important;
      display: none;
    }
  }
  div{
    width: 1.62rem;
    height: 1.68rem;
    margin-right: 0.2em;
    color: #ec6949;
  }
}
.mylocation{
  display: flex;
  height: 2em;

  div{
    width: 1.40rem;
    height: 1.50rem;
      margin-right: 0.2em;
      color: #49b8ec;
  }
}
.user-list {
    display: flex;
    flex-direction: column;
    li {
      padding: 1rem 0rem;
      font-size: 1.05em;

      // border-bottom: 1px solid #000;
      // .router-link-active {
      //   border-bottom: 4px solid blue;
      // }
      .router-link-exact-active {
        color:#2fade7;
      }
      a{
        display: flex;
        align-items: center;
        div{
          width: 1.3em;
          height: 1.3em;
          margin-right: 0.2em;
        }
        &:hover{
          color: #2fade7;
        }
      }
  }
}

</style>

<route lang="yaml">
meta:
  layout: home
</route>
